<template>
  <div class="all">
    <div>
      <!-- 立即开票 -->
      <div v-show="immediately" >
        <IssueNow 
          ref="issueNow"
          @createIn="createIn"
          @cancleIn="cancleIn"
        >
        </IssueNow>
      </div>
      
      <!-- 发票完整信息 蓝字 -->
      <div v-show="!immediately">
        <el-row gutter="10">
          <!-- 购方 -->
          <el-col :span="12">
            <Purchaser ref="purchaser"></Purchaser>
          </el-col>
          <!-- 销方 -->
          <el-col :span="12">
            <Seller ref="seller"></Seller>
          </el-col>
          </el-row>
          <!-- 开票信息 -->
          <el-row>
            <el-col :span="24">
              <Payment ref="payment"></Payment>
            </el-col>
          </el-row>
          <!-- 备注 -->
          <el-row>
            <el-col :span="24">
              <el-card>
                <div style="display: flex;">
                  <span class="title">备注信息</span>
                  <el-input 
                    type="textarea"
                    v-model="buleInfo.billRemark"
                    placeholder="如有备注，请输入"
                  ></el-input>
                </div>
              </el-card>
              <!-- <Remark ref="remark"></Remark> -->
            </el-col>
          </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import IssueNow from "@/components/issueInvioce/module/IssueNow.vue";
import Purchaser from "@/components/issueInvioce/module/Purchaser.vue";
import Seller from "@/components/issueInvioce/module/Seller.vue";
// import Remark from "@/components/issueInvioce/module/Remark.vue";
import Payment  from "@/components/issueInvioce/module/Payment .vue";
import {transPreview} from '@/utils'

export default {
  components:{
    IssueNow,
    Purchaser,
    Seller,
    Payment,
    // Remark,
  },
  data() {
    return{
      immediately: true,
      buleInfo:{
        billRemark: '', // 发票备注
      } // 蓝字全部信息
    }
  },
  methods: {
    butShow(val) {
      this.immediately = val
    },
    dialogShow() {
      this.$refs.issueNow.dialogVisible = true
      console.log(this.$refs.issueNow.dialogVisible, '-------------dialog');
    },
    // 立即开票
    createIn(formInvioce) {
      console.log(formInvioce, '立即开票')
      this.$refs.payment.payInfo = formInvioce
    },
    // 取消开票
    cancleIn() {
      this.$emit('cancleL')
    },
    // 发票详情
    invioceDe() {
      let invioces = this.$refs.payment.payInfo
      let buyForm = this.$refs.purchaser.buyForm // 购方
      let sellForm = this.$refs.seller.sellForm // 销方
      let tableData = this.$refs.payment.tableData // 开票信息
      let redForm = this.$refs.payment.redForm // 红字信息
      // let remarkForm = this.$refs.remark.remarkForm // 备注信息
      this.buleInfo = {...this.buleInfo,...invioces, ...buyForm, ...sellForm, ...redForm}
      this.buleInfo.invoiceSplitLines = tableData
      if( tableData.lenght > 8) {
        this.buleInfo.invoiceList = 1 // 清单
      } else {
        this.buleInfo.invoiceList = 0 // 非清单
      }
      this.buleInfo.title = transPreview(this.buleInfo.invoiceType)
      this.buleInfo.zamountHsj = this.$refs.payment.totalPrice // 价税合计
      this.buleInfo.zamountWsj = this.$refs.payment.noTaxPrince // 金额
      this.buleInfo.zamountSej = this.$refs.payment.totalTax // 税额
    },
  }
}
</script>

<style lang="scss" scoped>
.all{
  // background-color: #f5f5f5;

  .flexC{
    display: flex;
    flex-direction: column;
  }
  .title{
    
    display: block;
    width: 100px;
    font-size: 17px;
    font-weight: 700;
  }
  .invioceK{
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -15px;
    height: 50px;
    width: 110%;
    background-color: #fff;
  }
}

::v-deep {
  .el-card__body{
    padding: 15px 20px;
  }
}
</style>